﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="md5.js" type="text/javascript"></script>
</head>
<body>
    <div style="display:none; border:1px dotted red;" id="idError1" class="fg-color-red icon-eye" ></div>
    <h3 class="fg-color-red icon-eye" style=" border:1px dotted red; display:none;" id='idErrInfo'></h3>
    <h3 class="icon-user fg-color-white"> Full Name</h3>
    <div class="input-control text ">
        <input id="idName" type="text" class="fg-color-black" placeholder='Enter your full name' style="color:black;" />
    </div>

    <h3 class="icon-mail fg-color-white"> Email</h3>
    <div class="input-control text ">
        <input id="idEmail" type="email" class="fg-color-black" placeholder='Enter your email address' style="color:black;" />
    </div>

    <h3 class="icon-locked fg-color-white"> Password</h3>
    <div class="input-control text ">
        <input id="idPasswordUp" type="password" class="fg-color-black" placeholder='Enter your password' style="color:black;" />
    </div>

    <h3 class="icon-locked fg-color-white"> Password Again</h3>
    <div class="input-control text ">
        <input id="PasswordAgain" type="password" class="fg-color-black" placeholder='Enter your password again' style="color:black;" />
    </div>

    <h3 class="icon-user-3 fg-color-white"> Gender</h3>
    <div class="input-control select">
        <select id="idGender">
            <option value='0'>Male</option>
            <option value='1'>Female</option>
            <option value='2'>Whatever</option>
        </select>
    </div>

    <h3 class="icon-user-2 fg-color-white"> Age</h3>
    <div class="input-control select">
        <select id='idAge'></select>
    </div>

    <button id="idSubmit" class=" bg-color-darken  fg-color-white icon-unlocked"> Sign up </button>
    <img id="idSubmitting" src="../MetroUI/images/preloader-w8-cycle-black.gif" width="18px" height="18px" style="display:none;"/> 

    <h5 class="fg-color-dark">By tapping on "Sign up" above, you are agreeing to the Terms of Service and Privacy Policy.</h5>
</body>
<script type="text/javascript">
    $(document).ready(function ()
    {
        LoadUIData();
        $('#idSubmit').click(function ()
        {
            if (!$(this).hasClass("disabled"))
            {
                //if (!(true == CheckErrs('UserId', $('#idName'), $('#idError'), 'Please input your full name.') || true == CheckErrs('Email', $('#idEmail'), $('#idError'), 'Please input your email, this is required when you login.') || true == CheckErrs('Password', $('#idPassword'), $('#idError'), 'Please input your password.')))
                {
                    if (false == (true == CheckTheSamePassword($('#idPasswordUp'), $('#PasswordAgain'))))
                    {
                        $.ajax({
                            type: "POST",
                            url: "Login.ashx",
                            data: "mode=CheckEmail&email=" + $('#idEmail').val(),
                            async: true,
                            success: function (data)
                            {
                                if ('0' == data)
                                {
                                    if (true == CheckErrs('UserId', $('#idName'), $('#idErrInfo'), 'Please input your full name.') || true == CheckErrs('Email', $('#idEmail'), $('#idErrInfo'), 'Please input your email, this is required when you login.') || true == CheckErrs('Password', $('#idPasswordUp'), $('#idErrInfo'), 'Please input your password.'))
                                    {
                                        return;
                                    }
                                    else
                                    {
                                        LoginSuccess();
                                    }
                                }
                                else
                                {
                                    $('#idErrInfo').show();
                                    $('#idErrInfo').html("This email has been registered, please enter another one!");
                                    return;
                                }
                            }
                        });
                    }
                }
            }
        });

    });

    function LoginSuccess()
    {
        $('#idSubmitting').show();
        $(this).addClass("disabled");

        var form = $('#idName').val() + '|' + $('#idEmail').val() + '|' + $('#idGender').val() + '|' + $('#idAge').val() + '|' + hex_md5($('#idPasswordUp').val());
        $.ajax({
            type: "POST",
            url: "Login.ashx",
            data: "mode=signup&record=" + form,
            async: false,
            success: function (data)
            {
                //welcome screen, then help screen, then go to main page
                $('#idSubmitting').hide();
                $('#idSubmit').removeClass("disabled");
                relocate($('#idEmail').val());
            }
        });
    }
    function CheckTheSamePassword(obj, objRepeat)
    {
        var IsError = !(obj.val() == objRepeat.val());
        if (IsError == true)
        {
            $('#idErrInfo').show();
            $('#idErrInfo').html("The passwords you typed do not match. Type the same password in both text boxes.");
        }
        return IsError;
    }

   
    function CheckErrs(rule, obj, errObj, msg)
    {
        var IsCorrectRuel = true;
        var ErrorCode = 0;
        var IsBlank = false;
        var Errs = false;
        //alert(obj.val() );
        if (obj.val() == '')
        {
            ShowErr(errObj, msg);
            obj.focus();
            IsBlank = true;
        }
        else
        {
            errObj.hide();
        }

        if (!IsBlank)
        {
            switch (rule)
            {
                case 'UserId':
                    IsCorrectRuel = true;
                    break;
                case 'Email':
                    if (false == isValidMail(obj.val()))
                    {
                        ErrorCode = 2;
                        IsCorrectRuel = false;
                    }
                    break;
                case "Password":
                    if (obj.val().length < 4 || obj.val().length > 32)
                    {
                        ErrorCode = 1;
                        IsCorrectRuel = false;
                    }
                    else
                    {
                        IsCorrectRuel = true;
                    }
                    break;
            }            
            if (!IsCorrectRuel)
            {
                switch (ErrorCode)
                {
                    case 0:
                        ShowErr(errObj, 'Unknown Error!');
                        break;
                    case 1:
                        ShowErr(errObj, 'Length of password must be between 4 and 32!');
                        break;
                    case 2:
                        ShowErr(errObj, 'Please input a valid Email address!');
                        break;
                }

                Errs = true;
            }
        }
        else
        {
            Errs = true;
        }

        return Errs;
    }

    function ShowErr(errObj, msg)
    {
        errObj.show();
        errObj.html(msg);
    }
    
    
    function LoadUIData()
    {
        var ageData = "";
        var i = 0;
        for (i = 1; i < 100; i++)
        {
            if (i == 30)
            {
                ageData = ageData + '<option value="' + i + '" selected>' + i + '</option>';
            }
            else
            {
                ageData = ageData + '<option value="' + i + '">' + i + '</option>';
            }
        }
        $('#idAge').append(ageData);
    }
</script>
</html>
